import { useEffect, useState } from "react";
import { useComponentStore } from "../../../stores/components";
import TextArea from "antd/es/input/TextArea";


export interface GoToLinkConfig {
  type: 'goToLink'
  url: string
}

export interface GoToLinkProps {
  value?: string
  defaultValue?: string
  onChange?: (config: GoToLinkConfig) => void
}

const GoToLink = (props: GoToLinkProps) => {

  const { defaultValue, onChange, value: val } = props

  const { curComponentId } = useComponentStore()
  const [value, setValue] = useState(defaultValue)

  useEffect(() => {
    setValue(val)
  }, [val])

  const urlChange = (value: string) => {
    if(!curComponentId) return

    setValue(value)

    onChange?.({
      type: 'goToLink',
      url: value
    })
  }
   
  return  <div className="mt-[40px]">
    <div className="flex items-center gap-[10px]">
      <div>链接:</div>
      <div>
        <TextArea
          className="h-[200px] w-[500px] border-[1px] border-[#000] border-solid"
          onChange={(e) => { urlChange(e.target.value) }}
          value={value || ''}
        />
      </div>
    </div>
  </div>
}

export default GoToLink